//获取cookie中的name1键
var name1=getCookie('name1');
//获取locaStrong中的cartList数据
var cartList=localStorage.getItem('cartList')
//获取地址栏中的地址
var url=location.href
//获取大盒子对象
var div1=document.querySelector(".container")
//判断当前进入购物车时，是否已经登录了
if(name1){
    //把字符串转为数组对象
    cartList=eval('('+cartList+')')
    //判断当前cartList中是否有数据
    if(cartList.length>0){
        show1()
    }else{
        var str=`
        <div class="jumbotron">
            <h1>您还未选购任何的商品！！！o(╥﹏╥)o</h1>
            <p>点击下方按钮快去选购吧! (*^▽^*)</p>
            <p><a class="btn btn-primary btn-lg" href="./list.html" role="button">赶紧去选购吧(*^▽^*)</a></p>
        </div>
        `
        //把字符串渲染到页面中
        div1.innerHTML=str
    }
}else{
    alert("请登录进入")
    location.href="../html/login.html?pathurl="+url
}
//把locaStrong中的数据渲染到页面中
function show1(){
    //判断所有的选中框是否都被选中了
    var bool=cartList.every(item=>{
        return item.is_select==1
    })
    //拼接头部
    var str1=`
    <div class="panel-heading">
        <input type="checkbox" name="quan" ${bool?"checked":''}>全选
        商品种类：<span>${cartList.length}</span>
        所选商品数量：<span>${total()[0]}</span>
        所选商品价格：￥<span>${total()[1]}</span>
        <button type="button" class="btn btn-primary btn-xs">结算</button>
        <button type="button" class="btn btn-success btn-xs">清空购物车</button>
    </div>
    <div class="panel-body">
    `
    //拼接商品
    //遍历cartList中的元素
    cartList.forEach(item=>{
        str1+=`
        <div class="media">
            <div class="media-left">
            <input type="checkbox" name="xuan" ${item.is_select==1?"checked":''} data-id="${item.goods_id}">
            <a href="#">
                <img class="media-object" src="${item.picture}" width="150">
            </a>
            </div>
            <div class="media-body">
            <h3 class="media-heading">${item.names}</h3>
            <h3>${item.goods_price}</h3>
            <button type="button" class="btn btn-primary" data-id="${item.goods_id}">从购物车中删除此商品</button>
            
            <div class="btn-group right1" role="group" aria-label="...">
                <button type="button" class="btn btn-default" data-id="${item.goods_id}" ${item.cart_number<=1? "disabled":''}>-</button>
                <button type="button" class="btn btn-default">${item.cart_number}</button>
                <button type="button" class="btn btn-default" data-id="${item.goods_id}" ${item.cart_number>=item.goods_number?"disabled":''}>+</button>
            </div>
            </div>
        </div>
        `
    })
    //拼接结束标签
    str1+=`
    </div>
    `
    //把拼接好的内容，渲染到大盒子中
    div1.innerHTML=str1
}
//给大盒子对象绑定点击事件
div1.onclick=function(e){
    var e = e || window.event
    //获取操作对象
    var target=e.target || e.srcElement
    //判断点击的是否为加号
    if(target.innerHTML=="+"){
        //获取当前按钮的自定义属性id
        var id1=target.getAttribute("data-id")
        //遍历cartList中的商品
        cartList.forEach(item=>{
            //判断当前遍历出来的商品id是否跟id1相等
            if(item.goods_id==id1){
                //修改当前商品中的cart_number
                item.cart_number++
            }
        })
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify(cartList))
        //重新渲染一下页面
        show1()
    }
    //判断点击的是否为减法
    if(target.innerHTML=='-'){
        //获取当前按钮中的自定义属性id 
        var id2=target.getAttribute('data-id')
        cartList.forEach(item=>{
            //判断当前遍历出来的商品id是否等于id2
            if(item.goods_id==id2){
                item.cart_number--
            }
        })
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify(cartList))
        //重新渲染一下页面
        show1()
    }
    //判断点击的是否为删除按钮
    if(target.innerHTML=='从购物车中删除此商品'){
        //获取当前按钮的自定义id属性
        var id3=target.getAttribute('data-id')
        //使用filter()方法进行过滤
        cartList=cartList.filter(item=>{
            //把不等于当前id3的商品返回给cartList
            return item.goods_id!=id3
        })
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify(cartList))
        //重新渲染一下页面
        show1()
        location.reload()
    }
    //判断点击的是否为全选框
    if(target.name=="quan"){
        //遍历cartList中所有商品
        cartList.forEach(item=>{
            //判断当前全选框是否被选中
            if(target.checked){
               item.is_select=1 
            }else{
               item.is_select=0
            }
        })
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify(cartList))
        //重新渲染一下页面
        show1()
    }

    //判断点击的是否为选中框对象
    if(target.name=="xuan"){
        //获取当前选中框对象的自定义id属性
        var id4=target.getAttribute("data-id")
        //遍历所有商品
        cartList.forEach(item=>{
            //判断遍历出来的商品id是否等于id4
            if(item.goods_id==id4){
                //修改当前商品的is_select 
                item.is_select=item.is_select==1?0:1
            }
        })
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify(cartList))
        //重新渲染一下页面
        show1()
    }
    //判断点击的是否为结算按钮
    if(target.innerHTML=='结算'){
        if(confirm("你确定要支付：￥"+total()[1])){
           //过滤已购买的商品
           cartList=cartList.filter(item=>{
               return item.is_select!=1
           })
           //重新把cartList赋值给locaStrong
            localStorage.setItem("cartList",JSON.stringify(cartList))
            //重新渲染一下页面
            show1()
        }else{
            alert("暂时不买了")
        }
    }
    //清空购物车
    if(target.innerHTML=='清空购物车'){
        //重新把cartList赋值给locaStrong
        localStorage.setItem("cartList",JSON.stringify([]))
        //刷新页面
        location.reload()
    }
}

function total(){
    var num=0 //所选商品数量
    var price=0 //所选商品总价
    //遍历cartList中所有商品
    cartList.forEach(item=>{
        //判断当前商品是否被选中
        if(item.is_select==1){
            num+=item.cart_number
            price+=parseFloat(item.goods_price)*item.cart_number//计算价格
        }
    })
    return [num,price]
}
